<template>
    <MpMaterialNewsPreviewEdit
            :show-add-button="true"
            :form-operations="formOperations"
            ref="newsPreviewEdit"
            :thumb-media-id-upload-url="thumbMediaIdUploadUrl"
            v-on:currentItemChange="currentItemChange">
        <el-button icon="el-icon-refresh" type="primary" class="g-width100 g-margin-top30" :loading="addToWxServerLoading"  @click="addToWxServer">添加到微信服务器</el-button>
    </MpMaterialNewsPreviewEdit>
</template>

<script>
    import MpMaterialNewsPreviewEdit from '../../../../components/mp/MpMaterialNewsPreviewEdit.vue'

    export default {
        components:{
            MpMaterialNewsPreviewEdit
        },
        props:{

        },
        data(){
            return {
                appCode: this.$route.query.appCode,
                addToWxServerLoading: false,
                selectedItem:{
                    index: null,
                    item: null
                },
                formOperations:[
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: this.saveCurrentNews,
                                    disabled: ()=>{return this.selectedItem.index ==null},
                                    label: '保存当前图文项'
                                },
                                {
                                    action: this.deleteCurrentNews,
                                    disabled: ()=>{return this.selectedItem.index ==null},
                                    label: '删除当前图文项'
                                },
                                {
                                    action: 'reset',
                                    label: '重置',
                                    type: 'default'
                                }
                            ]
                        }
                    }
                ]
            }
        },
        mounted() {
            if (!this.appCode) {
                this.$message.error('参数错误，请传appCode')
            }
        },
        methods:{
            thumbMediaIdUploadUrl(){
                let type = 'image'
                if (!this.appCode) {
                    return false
                }

                return this.$baseURL.wx + '/wx/mp/material/'+ this.appCode +'/create/file/' + type
            },
            currentItemChange(val){
                this.selectedItem = val
            },
            getNewsItem(){
                return this.$refs.newsPreviewEdit.getNewsItem()
            },
            saveCurrentNews() {
                this.$refs.newsPreviewEdit.saveCurrentNews()
            },
            deleteCurrentNews(){
                this.$refs.newsPreviewEdit.deleteCurrentNews()
            },
            // 添加到微信服务器
            addToWxServer(){
                if(!this.getNewsItem() || this.getNewsItem().length == 0){
                    this.$message.error('请先添加图文项并进行编辑')
                    return
                }
                if(!this.appCode){
                    this.$message.error('请选择公众号')
                    return
                }

                let param = {
                    articles: this.getNewsItem()
                }
                this.addToWxServerLoading = true
                this.axios.post(this.$baseURL.wx + '/wx/mp/material/' + this.appCode + '/create/news',param)
                    .then(res=>{

                        this.$message.success('恭喜推送同步成功')
                    }).catch(error=>{
                    if(error.response){
                        if(error.response.status != 401){
                            this.$message.error(error.response.data.msg + ' 请确认所有图文项都已保存')
                        }else{
                            this.$message.error(error.response.data.msg)
                        }
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.addToWxServerLoading = false
                })
            },
        },
        watch:{
        }
    }
</script>

<style scoped>

</style>